<template>
  <view class="container">
    <uni-list>
      <!-- 上传封面 -->
      <uni-list-item :border="false">
        <template #body>
          <view style="font-size: 28rpx; margin-bottom: 15rpx">上传封面：</view>
          <upload @recivecoverimage="recivecoverimage" :coverimglength="coverimgcount" :image="actinfo.cover_image"></upload>
        </template>
      </uni-list-item>
      <!-- 上传图片 -->
      <uni-list-item :border="false">
        <template #body>
          <view style="font-size: 28rpx; margin-bottom: 30rpx">上传图片：</view>
          <upload @revivebannerimg="recivebnerimg" :swiperimgcount="swiperimgcount" :image="actinfo.banner_images"></upload>
        </template>
      </uni-list-item>
      <!-- 活动名称 -->
      <uni-list-item :border="false" ellipsis="2" title="活动名称" rightText="请输入">
        <template #footer>
          <input class="nameinput" placeholder="请输入" v-model="actinfo.title" />
        </template>
      </uni-list-item>
      <!-- 活动类型 -->
      <uni-list-item showArrow title="活动类型" :border="false" :rightText="showact || '请选择'" clickable="true" @click="$refs.popup.open()" />
      <uni-list-item :border="false" title="活动时间">
        <!-- 右侧自定义内容 -->
        <template #footer>
          <uni-icons type="down" size="30" color="#404040"></uni-icons>
          <view style="display: flex">
            <view @click="chooseSartTime">
              <view v-if="startTime != ''" style="font-size: 24rpx">{{ startTime }}</view>
              <view v-else class="starttime">
                <view v-if="actinfo.start_time == ''">开始时间</view>
                <view v-else>{{ actinfo.start_time }}</view>
              </view>
            </view>
            <text style="margin: 0 20rpx">-</text>
            <view @click="chooseEndTime">
              <view v-if="endTime != ''" style="font-size: 24rpx">{{ endTime }}</view>
              <view v-else class="starttime">
                <view v-if="actinfo.end_time == ''">结束时间</view>
                <view v-else>{{ actinfo.end_time }}</view>
              </view>
            </view>
          </view>
        </template>
      </uni-list-item>
      <!--  活动地点-->
      <uni-list-item showArrow title="活动位置" :border="false" :rightText="actinfo.address || '请选择'" clickable="true" @click="chooseLoacal" />
      <!-- 最少人数 -->
      <uni-list-item title="最少人数:" :border="false">
        <template #footer>
          <input type="text" class="nameinput" placeholder="请输入" maxlength="3" v-model="actinfo.min_num" />
        </template>
      </uni-list-item>
      <view class="tip">不能满足最少成团人数，报名自动取消</view>
      <!-- 最多人数 -->
      <uni-list-item title="最多人数:" :border="false">
        <template #footer>
          <input type="text" class="nameinput" placeholder="请输入" maxlength="3" v-model="actinfo.max_num" />
        </template>
      </uni-list-item>
      <!-- 报名价格 -->
      <uni-list-item title="报名价格(元):" :border="false">
        <template #footer>
          <input type="text" class="nameinput" placeholder="请输入" v-model="actinfo.price" />
        </template>
      </uni-list-item>
      <!-- 联系方式 -->
      <uni-list-item title="联系方式:" :border="false">
        <template #footer>
          <input type="text" class="nameinput" placeholder="请输入" maxlength="11" v-model="actinfo.phone" />
        </template>
      </uni-list-item>
      <!-- 上传微信二维码 -->
      <uni-list-item :border="false">
        <template #body>
          <view style="font-size: 28rpx; margin-bottom: 30rpx">微信二维码：</view>
          <upload @weixincode="reciveweixincode" :weixinimg="weixinimg" :image="actinfo.wx_qrcode_image"></upload>
        </template>
      </uni-list-item>
      <!-- 上传群微信二维码 -->
      <uni-list-item :border="false">
        <template #body>
          <view style="font-size: 28rpx; margin-bottom: 30rpx">群微信二维码：</view>
          <upload @groupweixincode="recivegroupcode" :weixingrounp="weixingrounp" :image="actinfo.wx_group_qrcode_image"></upload>
        </template>
      </uni-list-item>
      <!-- 编辑详情内容 -->
      <uni-list-item :border="false">
        <template #footer>
          <view style="margin-bottom: 15rpx; font-size: 28rpx">活动流程：</view>
          <editer @context="recivecontext" :data="actinfo.content" v-if="editorshow"></editer>
        </template>
      </uni-list-item>
      <view class="btn">
        <button class="push" @click="pushact">发布</button>
        <button class="preview" @click="godetail">预览</button>
      </view>
    </uni-list>

    <!-- 活动类型弹框 -->
    <uni-popup ref="popup" type="bottom" backgroundColor="#fff">
      <view class="acttype">
        <view>
          <view class="acttypetitle">
            活动类型
            <uni-icons type="closeempty" size="20" style="margin-left: 220rpx" @click="$refs.popup.close()"></uni-icons>
          </view>
        </view>
        <!-- picker -->
        <picker-view indicator-style="height: 50px;" :value="0" @change="acttypeChange" style="height: 300rpx; margin: 50rpx 0">
          <picker-view-column>
            <view style="text-align: center; line-height: 100rpx" v-for="(item, index) in acttypeList" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="$refs.popup.close()">确定</button>
      </view>
    </uni-popup>
    <!-- 开始时间弹框 -->
    <uni-popup ref="startTime" type="bottom" backgroundColor="#fff">
      <view style="width: 750rpx; height: 594rpx">
        <view style="margin-top: 26rpx">
          <text class="timetitle">活动时间</text>
          <image src="../static/icon/close.png" mode="" class="closeicon" @click="closetimepupop"></image>
        </view>
        <!-- 弹框内显示时间 -->
        <!--   <view class="currentTime">2022-09-09 14時 30分</view> -->
        <!-- 时间选择器 -->
        <view>
          <datetime type="day" ref="dateDom" :openStatus="true" :getDayNum="30" :chooesMaxDay="30" @select="onSelectTime"></datetime>
        </view>
        <view style="margin-top: 40rpx">
          <button class="timebtn" @click="okstartTime">确认</button>
        </view>
      </view>
    </uni-popup>
    <!-- 结束时间弹框 -->
    <uni-popup ref="endTime" type="bottom" backgroundColor="#fff">
      <view style="width: 750rpx; height: 594rpx">
        <view style="margin-top: 26rpx">
          <text class="timetitle">活动时间</text>
          <image src="../static/icon/close.png" mode="" class="closeicon" @click="$refs.endTime.close()"></image>
        </view>
        <!-- 弹框内显示时间 -->
        <!-- <view class="currentTime">2022-09-09 14時 30分</view> -->
        <!-- 时间选择器 -->
        <view>
          <!--    <datetime type="day" :openStatus="true" ref="dateDom" :getDayNum="30" :chooesMaxDay="30" @select="onSelectTime"></datetime> -->
          <dateendtime type="day" :openStatus="true" ref="endTimeDom" :getDayNum="30" :chooesMaxDay="30" @select2="onSelectTime2"></dateendtime>
        </view>
        <view style="margin-top: 40rpx">
          <button class="timebtn" @click="okendtime">确认</button>
        </view>
      </view>
    </uni-popup>
    <!-- 实名认证弹框 -->
    <uni-popup type="center" ref="shiming">
      <view class="renzheng">
        <view class="shimingtip">提示</view>
        <view class="tiptext">您还未实名认证，请先实名！</view>
        <view style="display: flex">
          <button class="cancel" @click="cancelshiming">取消</button>
          <button class="goshiming" @click="goshiming">去实名</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import datetime from './components/datetime.vue';
import dateendtime from './components/dateendtime.vue';
import editer from './components/myedit.vue';
import upload from './components/upload.vue';
import { btoa } from 'js-base64';
export default {
  components: {
    datetime,
    editer,
    upload,
    dateendtime
  },

  data() {
    return {
      startTime: '',
      endTime: '',
      acttypeList: ['', '全部', '周边游', '市内游', '聚餐', '剧本杀', '羽毛球', '骑行', '其他'],
      acttypeList2: ['周边游', '市内游', '聚餐', '剧本杀', '羽毛球', '骑行', '其他'],
      showact: '',
      actinfo: {
        activity_type_id: '',
        cover_image: '',
        banner_images: '',
        title: '',
        start_time: '',
        end_time: '',
        address: '',
        min_num: '',
        max_num: '',
        price: '',
        phone: '',
        wx_qrcode_image: '',
        wx_group_qrcode_image: '',
        content: '',
        province: '',
        city: '',
        area: ''
      },
      is_auth: null, // 申请的状态
      coverimgcount: 0, // 封面的图片数量控制上传图标
      swiperimgcount: 0, // 轮播图数量
      weixinimg: 0, // 微信个人二维码
      weixingrounp: 0, // 微信群二维码
      copyactdate: {},
      id: null,
      editorshow: false // 控制编辑器的延迟渲染
    };
  },
  async onLoad(opt) {
    console.log('赋值活动的id=----', opt);
    this.gteactlist();
    this.getuserinfo();
    if (opt.id) {
      this.id = opt.id;
      await this.copyactive(opt.id);
    }
    console.log('上一级页面', opt.type);
    if (opt.type) {
      this.editorshow = true;
    } else {
      if (this.actinfo.content) {
        this.editorshow = true;
      }
    }
  },

  methods: {
    // 取消实名
    cancelshiming() {
      uni.navigateBack();
      $refs.shiming.close();
    },
    // 跳转到实名
    goshiming() {
      uni.navigateTo({
        url: '/sub_my/certification/certification'
      });
    },
    // 跳转预览
    godetail() {
      if (this.id) {
        uni.navigateTo({
          url: '/sub_active/pushdetail/pushdetail?pushData=' + encodeURIComponent(JSON.stringify(this.actinfo)) + '&type=1'
        });
      } else {
        uni.navigateTo({
          url: '/sub_active/pushdetail/pushdetail?pushData=' + encodeURIComponent(JSON.stringify(this.actinfo))
        });
      }
    },
    // 复制活动
    async copyactive(id) {
      const res = await uni.$http.post('index/getActivityInfo', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      console.log('复制的活动函----', res.data.data);
      for (let k in this.actinfo) {
        this.actinfo[k] = res.data.data[k];
      }
      this.actinfo.start_time = '';
      this.actinfo.end_time = '';
      console.log('复制后的活动----', this.actinfo);
      // this.actinfo = res.data.data;
      this.showact = this.acttypeList2[this.actinfo.activity_type_id - 1];
      this.endTime = this.actinfo.end_time_text;
      this.actinfo.end_time = this.actinfo.end_time * 1000;
      this.actinfo.start_time = this.actinfo.start_time * 1000;
      this.startTime = this.actinfo.start_time_text;
      this.actinfo.banner_images = this.actinfo.banner_images.join(',');
    },
    // 获取个人信息
    async getuserinfo() {
      const res = await uni.$http.post('user/index', {
        user_id: JSON.parse(uni.getStorageSync('userinfo')).user_id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });

      this.is_auth = res.data.data.is_auth;
      // 判断是否实名
      if (this.is_auth == 0 || this.is_auth == 3) {
        this.$refs.shiming.open();
      }
    },
    // 发布活动
    async pushact() {
      if (this.is_auth != 2) {
        uni.showToast({
          title: '实名通过后在可以发布活动',
          icon: 'none'
        });
        return;
      }
      if (new Date(this.actinfo.start_time).getTime() < new Date().getTime()) {
        uni.showToast({
          title: '活动开始时间不能小于现在的时间',
          icon: 'none'
        });
        return;
      }
      if (!/^1[3-9][0-9]{9}$/.test(this.actinfo.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        });
        return;
      }
      this.actinfo.start_time = String(new Date(this.actinfo.start_time).getTime() / 1000);
      this.actinfo.end_time = String(new Date(this.actinfo.end_time).getTime() / 1000);
      this.actinfo.token = JSON.parse(uni.getStorageSync('userinfo') || '{}').token;
      if (this.actinfo.id) {
        delete this.actinfo.id;
      }
      this.actinfo.content = btoa(unescape(encodeURIComponent(this.actinfo.content)));
      const res = await uni.$http.post('user/addActivity', {
        ...this.actinfo
      });
      console.log(res);
      if (res.data.code == 1) {
        uni.redirectTo({
          url: '/sub_my/exportactdata/exportactdata'
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
      }
    },

    // 获取活动类型
    async gteactlist() {
      const res = await uni.$http.post('index/getActivityType', {
        token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
      });
      console.log(res);
      this.acttypeList = res.data.data;
      this.acttypeList.unshift('');
    },
    // 上传封面图片
    recivecoverimage(e) {
      this.coverimgcount = e.length;
      this.actinfo.cover_image = e.join(',');
    },
    // c上传的图片
    recivebnerimg(e) {
      this.swiperimgcount = e.length;
      if (e.length >= 5) {
        uni.showToast({
          title: '最多只能上传5张图片',
          icon: 'none'
        });
      }
      this.actinfo.banner_images = e.join(',');
    },
    // 微信二维码
    reciveweixincode(e) {
      this.weixinimg = e.length;
      this.actinfo.wx_qrcode_image = e.join(',');
    },
    // 微信群二维码
    recivegroupcode(e) {
      this.weixingrounp = e.length;
      this.actinfo.wx_group_qrcode_image = e.join(',');
    },
    // 选择活动类型改变
    acttypeChange(value) {
      // 显示活动类型
      this.showact = this.acttypeList.filter((item) => {
        return item.id == this.acttypeList[value.detail.value].id;
      })[0].name;
      this.actinfo.activity_type_id = this.acttypeList[value.detail.value].id;
    },
    // 选择开始时间
    chooseSartTime() {
      this.$refs.startTime.open();
    },
    // 开始时间的组件事件
    onSelectTime(value) {
      console.log(value);
      this.actinfo.start_time = value.time;

      if (this.actinfo.id != '') {
        this.startTime = value.time;
      } else {
        this.startTime = '';
      }
      this.$refs.startTime.close();
    },
    // 获取结束时间
    onSelectTime2(value) {
      console.log(value);
      this.actinfo.end_time = value.time;
      if (this.actinfo.id != '') {
        this.endTime = value.time;
      } else {
        this.endTime = '';
      }
      this.$refs.endTime.close();
      const start = new Date(this.actinfo.start_time).getTime();
      const end = new Date(this.actinfo.end_time).getTime();
      if (end - start < 0) {
        uni.showToast({
          title: '结束时间不能小于开始时间',
          icon: 'none'
        });
        this.actinfo.end_time = '';
        return;
      }
    },
    // 获取子组件内的确认开始时间方法
    okstartTime() {
      this.$refs.dateDom.confirm();
    },
    // 获取子组件内的确认结束时间的方法
    okendtime() {
      this.$refs.endTimeDom.confirm();
    },
    // 选择结束时间
    chooseEndTime() {
      this.$refs.endTime.open();
    },
    // 选择位置
    chooseLoacal() {
      uni.chooseLocation({
        success: (res) => {
          if (!res.address.includes('北京')) {
            return uni.showToast({
              title: '该区域功能暂未开放',
              icon: 'none'
            });
          }
          this.actinfo.address = res.address;
          this.actinfo.area = res.address.split('区')[0].split('市')[res.address.split('区')[0].split('市').length - 1] + '区';
          console.log(this.actinfo.area);
          this.actinfo.city = res.address.split('市')[0]?.split('省')[res.address.split('市')[0]?.split('省').length - 1] + '市';
          console.log(this.actinfo.city);
          this.actinfo.province = res.address.split('省')[0] + '省';
          console.log(this.actinfo.province);
        }
      });
    },
    // 关闭开始时间选择
    closetimepupop() {
      this.$refs.startTime.close();
    },
    // 获取标记的详情
    recivecontext(value) {
      console.log('查看是否有图片---', value);
      this.actinfo.content = value;
    }
  }
};
</script>

<style lang="less">
// 活动类型弹框
.acttype {
  width: 750rpx;
  height: 594rpx;
  .acttypetitle {
    margin-top: 40rpx;
    font-style: 32rpx;
    font-weight: bold;
    padding-left: 330rpx;
    color: #333333;
  }

  .btngender {
    width: 670rpx;
    height: 90rpx;
    color: #fff;
    background: linear-gradient(180deg, #0398ff 0%, #21e5ff 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
// 修改编辑框的字体图标大小
.toolbar .iconfont {
  font-size: 28rpx !important;
}
.uni-file-picker {
  overflow: visible !important;
}

.container {
  box-sizing: border-box;
  padding: 0 28prx;
}
// 选择封面的样式
.uni-file-picker__container {
  width: 160rpx;
  height: 160rpx;
}
.file-picker__box {
  width: 100%;
  height: 100%;
}
.starttime {
  width: 220rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 24rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
  border: 2rpx solid #f1f1f1;
}
// 修改活动名称的样式
.nameinput {
  text-align: right;
  font-size: 24rpx;
}
.file-picker__box {
}
.file-picker__box-content {
  width: 160rpx;
  height: 160rpx;
}
// 发布按钮
.push {
  width: 300rpx;
  height: 90rpx;
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  line-height: 90rpx;
  color: #ffffff;
  background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
  border-radius: 46rpx 46rpx 46rpx 46rpx;
}
.preview {
  width: 300rpx;
  height: 90rpx;
  font-size: 30rpx;
  line-height: 90rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #0398ff;
  border-radius: 46rpx 46rpx 46rpx 46rpx;
  border: 2rpx solid #0398ff;
}
.btn {
  display: flex;
}
.tip {
  width: 340rpx;
  height: 28rpx;
  font-size: 20rpx;
  line-height: 28rpx;
  margin: 16rpx 28rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #ec1303;
}
// 选择时间的pupon
.closeicon {
  width: 36rpx;
  height: 36rpx;
  margin-left: 244rpx;
  margin-right: 30rpx;
}
.timetitle {
  width: 128rpx;
  height: 44rpx;
  font-size: 32rpx;
  margin-left: 312rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 0rpx;
}
.currentTime {
  width: 312rpx;
  height: 40rpx;
  font-size: 28rpx;
  margin: 38rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #000000;
  line-height: 0rpx;
}
.timebtn {
  width: 690rpx;
  height: 90rpx;
  color: #fff;
  background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
  border-radius: 46rpx 46rpx 46rpx 46rpx;
  opacity: 1;
}
.renzheng {
  width: 690rpx;
  height: 400rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
}
// 实名弹框
.shimingtip {
  width: 60rpx;
  height: 42rpx;
  font-size: 30rpx;
  margin: 0rpx 316rpx;
  padding-top: 40rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #000000;
}
.tiptext {
  width: 364rpx;
  height: 40rpx;
  font-size: 28rpx;
  margin: 78rpx 164rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #000000;
}
.cancel {
  width: 300rpx;
  height: 90rpx;
  line-height: 90rpx;
  background: #f1f1f1;
  color: black;
  font-size: 28rpx;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
}
.goshiming {
  width: 300rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 28rpx;
  color: #fff;
  background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
  border-radius: 46rpx 46rpx 46rpx 46rpx;
}
</style>
